<template>
      <el-card style="max-width: 100%">
        <template #header>
            <div slot="header" class="clearfix">
                <span>客户资料完善</span>
            </div>
        </template>

<!-- 客户资料完善对话框 -->
      <el-form ref="form" :model="form"  style="height: 400px; overflow-y: auto;">

        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
    <el-tab-pane label="基本信息" name="基本信息" >
      <div>
      <el-row>
          <el-col :span="11">
            <el-form-item label="税号" prop="taxNumber" label-width="90px" >
              <el-input v-model="form.taxNumber"  />
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="负责人" prop="responsiblePerson" label-width="90px">
              <el-input v-model="form.responsiblePerson"  />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="11">
            <el-form-item label="总公司" prop="headOffice" label-width="90px">
              <el-input v-model="form.headOffice"  />
            </el-form-item>
          </el-col>
          <el-col :span="9" :offset="4">
              <el-radio v-model="form.headOfficePayment"  label="是">总公司付款</el-radio>
              <el-radio v-model="form.headOfficePayment"  label="否">寄售客户</el-radio>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="9">
            <div>
              交易对象分类方式
              <el-form-item label="渠道" prop="channel" label-width="70px">
              <el-input v-model="form.channel"  />
            </el-form-item>
            <el-form-item label="类型" prop="type" label-width="70px">
              <el-input v-model="form.type"   />
            </el-form-item>
            <el-form-item label="地区" prop="region" label-width="70px">
              <!-- <el-input v-model="form.region"   /> -->
              <!-- <Cascader @provincesValueChang="provincesValueChang" :value="form.region" style="width: 100%;"></Cascader> -->

              <el-cascader                                
                v-model="value"
                :options="options"
                @expand-change="handleChange"
                >
              </el-cascader>

            </el-form-item>
            <el-form-item label="国家" prop="country" label-width="70px">
              <el-input v-model="form.country"   />
            </el-form-item>
            <el-form-item label="路线" prop="route" label-width="70px">
              <el-input v-model="form.route"   />
            </el-form-item>
            <el-form-item label="其他" prop="other" label-width="70px">
              <el-input v-model="form.other"  />
            </el-form-item>
            </div>
            
          </el-col>
          <el-col :span="12" style="margin-top: 20px;"  :offset="2">
          
            <el-form-item label="开户银行" prop="openingBank" label-width="110px">
              <el-input v-model="form.openingBank"  />
            </el-form-item>
            <el-form-item label="银行账号" prop="bankAccount" label-width="110px">
              <el-input v-model="form.bankAccount"  />
            </el-form-item>
            <el-form-item label="付款银行（二）" prop="paymentBank2" label-width="110px">
              <el-input v-model="form.paymentBank2"  />
            </el-form-item>
            <el-form-item label="银行账号（二）" prop="bankAccount2" label-width="110px"> 
              <el-input v-model="form.bankAccount2"  />
            </el-form-item>
            <el-form-item label="付款银行（三）" prop="paymentBank3" label-width="110px">
              <el-input v-model="form.paymentBank3"  />
            </el-form-item>
            <el-form-item label="银行账号（三）" prop="bankAccount3" label-width="110px">
              <el-input v-model="form.bankAccount3"  />
            </el-form-item>
           
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="业务人员" prop="businessPerson" label-width="90px">
              <el-input v-model="form.businessPerson"  />
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="开业日期" prop="establishmentDate" label-width="90px">
              <el-input v-model="form.establishmentDate"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="收款业务员" prop="collectionPerson" label-width="90px">
              <el-input v-model="form.collectionPerson"  />
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="停业日期" prop="closedDate" label-width="90px">
              <el-input v-model="form.closedDate"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="部门" prop="department" label-width="90px">
              <el-input v-model="form.department"  />
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="员工人数" prop="numberOfEmployees" label-width="90px">
              <el-input v-model="form.numberOfEmployees"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="注册资金" prop="registeredCapital" label-width="90px">
              <el-input v-model="form.registeredCapital"  />
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="分店数" prop="numberOfBranches" label-width="90px">
              <el-input v-model="form.numberOfBranches"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="年营业额" prop="annualRevenue" label-width="90px">
              <el-input v-model="form.annualRevenue"  />
            </el-form-item>
          </el-col>
       
        </el-row>

      </div>
    </el-tab-pane>
    <el-tab-pane label="地址信息" name="地址信息" >
      <div>
      <el-row>
          <el-col :span="8">
            <el-form-item label="联系人" prop="contactPerson" label-width="90px">
              <el-input v-model="form.contactPerson"  />
            </el-form-item>
          </el-col>
          <el-col :span="8" >
            <el-form-item label="TEL_NO(一)" prop="telNo1" label-width="90px">
              <el-input v-model="form.telNo1"  />
            </el-form-item>
          </el-col>
          <el-col :span="8" >
            <el-form-item label="FAX NO" prop="faxNo" label-width="90px">
              <el-input v-model="form.faxNo"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="E-Mail" prop="email" label-width="90px" >
              <el-input v-model="form.email"  />
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="TEL_NO(二)" prop="telNo2" label-width="90px" >
              <el-input v-model="form.telNo2"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="邮编" prop="postalCode" label-width="90px">
              <el-input v-model="form.postalCode"  />
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="手机" prop="mobilePhone" label-width="90px">
              <el-input v-model="form.mobilePhone"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="注册地址" prop="registeredAddress" label-width="90px">
              <el-input v-model="form.registeredAddress"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="" prop="id"  label-width="90px">
              <el-input v-model="form.id"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="邮编" prop="postalCode2" label-width="90px">
              <el-input v-model="form.postalCode2"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="发票地址" prop="invoiceAddress"  label-width="90px">
              <el-input v-model="form.invoiceAddress"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="" prop="customerRank"  label-width="90px">
              <el-input v-model="form.customerRank"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="邮编" prop="postalCode3" label-width="90px">
              <el-input v-model="form.postalCode3"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="运货地址" prop="deliveryAddress"  label-width="90px">
              <el-input v-model="form.deliveryAddress"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="" prop="customerRank"   label-width="90px">
              <el-input v-model="form.customerRank"  />
            </el-form-item>
          </el-col>
        </el-row>


      </div>
    </el-tab-pane>
    <el-tab-pane label="交易信息" name="交易信息">
      <div>
      <el-row>
          <el-col :span="12">
            <el-form-item label="交易币种" prop="transactionCurrency" label-width="90px">
              <el-input v-model="form.transactionCurrency"  />
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="账款科目" prop="billSubject" label-width="90px">
              <el-input v-model="form.billSubject"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="定价顺序" prop="pricingOrder" label-width="90px">
              <el-input v-model="form.pricingOrder"  />
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="" prop="customerRank" label-width="90px">
              <el-input v-model="form.customerRank"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="折扣率" prop="discountRate" label-width="90px">
              <el-input v-model="form.discountRate"  />
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="预收科目" prop="advanceSubject" label-width="90px">
              <el-input v-model="form.advanceSubject"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="开票日期" prop="invoiceDate" label-width="90px">
              <template>
      每月 <el-input v-model="form.invoiceDate" style="width: 40px; margin: 0 7px;" /> 日
    </template>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="" prop="customerRank" label-width="90px">
              <el-input v-model="form.customerRank"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="发票种类" prop="invoiceType" label-width="90px">
              <el-select v-model="form.invoiceType" placeholder="请选择">
                <el-option
                   v-for="item in options_invoiceType"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="票据科目" prop="accountSubject" label-width="90px">
              <el-input v-model="form.accountSubject"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="税种" prop="taxType" label-width="90px">
              <el-select v-model="form.taxType" placeholder="请选择">
                <el-option
                   v-for="item in options_taxType"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="" prop="customerRank" label-width="90px">
              <el-input v-model="form.customerRank"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="付款条件" prop="paymentTerms" label-width="90px">
              <el-input v-model="form.paymentTerms"  />
            </el-form-item>
          </el-col>
         
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="价格说明" prop="priceDescription" label-width="90px">
              <el-input v-model="form.priceDescription"  />
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="单据发送方式" prop="documentDeliveryMethod" label-width="110px">
              <el-select v-model="form.documentDeliveryMethod" placeholder="请选择">
                <el-option
                   v-for="item in options_documentDeliveryMethod"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="销售评级" prop="salesRating" label-width="90px">
              <el-input v-model="form.salesRating"  />
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="结算方式" prop="settlementMethod" label-width="90px">
              <el-input v-model="form.settlementMethod"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="初次交易" prop="firstTransaction" label-width="90px">
              <el-input v-model="form.firstTransaction"  />
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="票据寄领" prop="billCollection" label-width="90px">
              <el-select v-model="form.billCollection" placeholder="请选择">
                <el-option
                   v-for="item in options_billCollection"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="最近交易" prop="latestTransaction" label-width="90px">
              <el-input v-model="form.latestTransaction"  />
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="订金比率" prop="depositRate" label-width="90px">
              <el-input v-model="form.depositRate"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="分期收款条件" prop="installmentCollectionTerms" label-width="100px">
              <el-input v-model="form.installmentCollectionTerms"  />
            </el-form-item>
          </el-col>
       
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="备注" prop="remarks" label-width="90px">
              <el-input v-model="form.remarks"  />
            </el-form-item>
          </el-col>
       
        </el-row>

      </div>
    </el-tab-pane>
    <el-tab-pane label="信用信息" name="信用信息">
      信用信息  
    </el-tab-pane>
    <el-tab-pane label="证照信息" name="证照信息">
      <div>
      <el-row>
          <el-col :span="12">
            <el-form-item label="营业执照" prop="businessLicense" label-width="90px">
              <el-input v-model="form.businessLicense"  />
            </el-form-item>
          </el-col>
        </el-row>


      </div>
    </el-tab-pane>
    <el-tab-pane label="信息浏览" name="信息浏览">
      信息浏览
    </el-tab-pane>
        </el-tabs>

      </el-form>
      

    <div class="footer">
        <el-button type="primary" @click="submitForm()">确定</el-button>
        <el-button @click="cancel()">取 消</el-button>
    </div>


</el-card>
</template>

<script >
import {
  getCustomer,
  addCustomer,
  updateCustomer,
  getregions
} from '@/api/crm/customer'
import { reqSendToken } from "@/api/login.js";
import Cascader from "@/components/Cascader/index.vue";

import { regionData } from 'element-china-area-data'

export default {
  name: 'Customer',
  components: {
    Cascader
  },
  dicts: [
    'clues_source',
    'customer_industry',
    'clues_status',
    'customer_rank',
    'region_list',
    'customer_status',
    'deal_status'
  ],
  data () {
    return {

      value: [],
        options: [],
        form:{},
        id:null,
      activeName: '基本信息',
       radio:'总公司付款',
       options_invoiceType: [{ value: '选项1',label: 'A:专用发票'}, {value: '选项2',label: 'B:增值税普通发票'},{ value: '选项3',label: 'C:服务型发票'}, {value: '选项4',label: 'D:其他'}],
       options_taxType: [{ value: '选项1',label: '1:应税内含'}, {value: '选项2',label: '2:应税外加'},{ value: '选项3',label: '3:零税率'}, {value: '选项4',label: '4:免税'}, {value: '选项5',label: '9:不计税'}], 
       options_documentDeliveryMethod: [{ value: '选项1',label: '1:邮寄'}, {value: '选项2',label: '2:FAX'},{ value: '选项3',label: '3:EDI'}, {value: '选项4',label: '4:E-MAIL'}], 
       options_billCollection: [{ value: '选项1',label: '1:邮寄'}],
    }
  },

  created() {
    this.id = this.$route.query.id;
    // this.resetFirstData()
    this.loadlist();


    // getregions().then((response) => {
    //     console.log(response.data);

    //   })
  },

  methods: {


    

    // // 处理第一层数据 --- 省
    // resetFirstData() {
    //   // console.log(regionData,'=========')
    //   this.options = regionData.map( (item,index) => {
    //     const label = item.label.includes('市') ? item.label.replace('市', '') : item.label;
    //     return {
    //       ...item,
    //       label: label,
    //       children_shi: [],
    //       value:`province-${index}`
    //     }
    //   })
    // },

  provincesValueChang(value){
      this.form.region = value;
    },
    loadlist(){
        getCustomer(this.id).then((response) => {
        this.form = response.data
        this.form.region = this.form.region.split(",");
        console.log(response.data,'=============');
        
        this.title_cons = '客户资料完善'
      })
    }  ,
    // 取消按钮
    cancel () {
        // this.form={}
        this.$router.push("Person")
    },  
    /** 提交按钮 */
    submitForm () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if(this.form.region){
            this.form.region = this.form.region.join(",");
          }
            updateCustomer(this.form).then((response) => {
              this.$modal.msgSuccess('修改客户资料成功')

              this.$router.push("Person")
            })
        
        }
      })
    },
    //tabs切换操作
    handleClick(tab, event) {
        console.log(tab, event);
    },

    // // handleChange地区
    //   handleChange(value) {
    //     console.log(value,'===value===');
    //     let valueArr = value[0].split('-')
    //     // console.log(valueArr,'===valueArr===');
    //     let valueArr_1=valueArr[1]
        
    //     let params = {}

    //     if(valueArr[0] == 'province') {
    //       let selectItem = this.options[valueArr[1]]//{lable  value}
    //       params.provinceName = selectItem.label
    //     } 
    //     // else if(valueArr[0] == 'city') {

    //     // }
    //     getregions(params).then((response) => {
    //     console.log(response.data,'===response.data===');
    //     console.log(response.data[0],'===response.data[0]===');
    //     this.options[valueArr_1].children_shi = response.data.map( (item,index) => {
    //       return {
    //         ...item,
    //         label:item.cityName,
    //         value:`city-${item.cityName}-${index}`,
    //         children_qu: [],
    //       }
    //     })

    //     console.log(this.options[valueArr_1].children_shi ,'=====children_shi[]======');
    //    const a= new Set(this.options[valueArr_1].children_shi);
    //    console.log(a,'=====a=====');
            
    //   })

    //   }
    }

  }

  

</script>
<style lang="scss" scoped>
.footer {
  text-align: right;
  margin-top: 20px;
}
</style>